<!--
 * @Author: 迷洛洛ywc
 * @Date: 2024-05-31 15:27:37
 * @LastEditors: 迷洛洛ywc
 * @LastEditTime: 2024-05-31 16:29:51
 * @Description: file content
-->
<template>
  <div id="map"></div>
</template>

<script>
export default {
  data () {
    return {
      map: {},
      T: ''
    }
  },
  // props: {
  //   landDetailData: {
  //     type: Object
  //   }
  // },
  // watch: {
  //   landDetailData (newVal) {
  //     this.load()
  //   }
  // },
  mounted () {
    this.load()
  },
  methods: {
    load () {
      const init = new Promise((resolve, reject) => {
        if (window.T) {
          // console.log('地图初始化成功')
          resolve(window.T)
        }
      })
      init.then((T) => {
        this.T = T
        this.map = new T.Map('map')
        this.map.centerAndZoom(new T.LngLat(108.17871, 35.60372), 5)
        this.map.panTo(new T.LngLat(108.17871, 35.60372), 16)
        // -----------------
        // const geoInfo = JSON.parse(this.landDetailData.geoInfo)
        // this.map.setViewport(geoInfo)
        // const points = []
        // for (let i = 0; i < geoInfo.length; i++) {
        //   points.push(
        //     new T.LngLat(geoInfo[i].lng, geoInfo[i].lat)
        //   )
        // }
        // // 创建面对象
        // const polygon = new T.Polygon(points, {
        //   color: 'blue',
        //   weight: 3,
        //   opacity: 0.5,
        //   fillColor: '#FFFFFF',
        //   fillOpacity: 0.5,
        //   test: `<p>名称：${this.landDetailData.landName}</p><p>面积：${this.landDetailData.landArea}亩</p>`
        // })
        // polygon.addEventListener('click', this.getinfo)

        // // 向地图上添加面
        // this.map.addOverLay(polygon)

        const ctrl = new T.Control.MapType([
          {
            title: '卫星',
            icon: 'http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellite.png',
            layer: window.TMAP_SATELLITE_MAP
          }
        ])

        this.map.addControl(ctrl)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
#map {
width: 319px;
height: 240px;
border-radius: 15px 15px 0 0;
}
</style>
